import Banner from "@/components/Banner";
import ButtonGroup from "@/components/ButtonGroup";
import ButtonGroupView from "@/components/ButtonGroupView";
import ButtonView from "@/components/ButtonView";
import CardView from "@/components/CardView";
import Message from "@/components/Message";
import PageTitle from "@/components/PageTitle";
import Text from "@/components/Text";
import { defineComponent, ref } from "vue";
import { useRequest } from "./request";
import { getSize, isDh } from "@/command/apiTool";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import IconText from "@/components/IconText";
import icon from "@/assets/image/icon.png";
import style from "./index.module.less";
import { Popup } from "vant";
import PopTitle from "@/components/PopTitle";
import PopCheck from "@/components/PopupCheck";
import * as vant from "vant";
const { showFailToast } = vant;

export default defineComponent({
  name: "",
  setup() {
    const { detail, accept, refuse, memberList } = useRequest();
    const popup = ref(false);
    const render1 = () => {
      return (
        <CardView title="参与情况" radius={0} class={"mt-[10px]"}>
          <div class={["horizontal"]}>
            {detail.value.richHelpGuaranteedSupplyTaskPartakes.map(
              (item: any) => {
                return (
                  <div class={["ml-8 mr-8 mt-10", style.taskList]}>
                    <IconText
                      class={["icon-text-col-bg"]}
                      url={item.avatar}
                      text={item.name}
                      iconSize={50}
                      maskText={
                        item.partakeFlag == "1"
                          ? "已参与"
                          : item.partakeFlag == "2"
                          ? "已拒绝"
                          : ""
                      }
                    />
                  </div>
                );
              }
            )}
          </div>
        </CardView>
      );
    };
    const render2 = () => {
      const buttons: IButtonGroupViewData[] = [
        {
          display: detail.value.partakeFlag == "0",
          text: "拒绝",
          childClass: "!h-[40px]",
          style: {
            background: "#FFFFFF",
            border: "1px solid #E6E6E6",
            width: getSize(165),
            borderRadius: getSize(25),
            height: getSize(40),
            color: "#333333",
          },
          onClick: () => {
            refuse(detail.value.id, "2");
          },
        },
        {
          display: detail.value.partakeFlag == "0",
          text: isDh() ? "立即参与" : "接受",
          childClass: "!h-[40px]",
          style: {
            width: getSize(165),
            background: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
          },
          onClick: () => {
            if (isDh()) {
              popup.value = true;
            } else {
              accept(detail.value.id, "1");
            }
          },
        },
        {
          display: isDh() && detail.value.partakeFlag == "1",
          text: "已参与",
          childClass: "!h-[40px] !w-full",
          style: {
            color: "#3595fc",
            background: "#e9efff",
          },
        },
        {
          display: !isDh() && detail.value.partakeFlag == "1",
          text: "已接受",
          childClass: "!h-[40px] !w-full",
          style: {
            color: "#3595fc",
            background: "#e9efff",
          },
        },
        {
          display: isDh() && detail.value.partakeFlag == "2",
          text: "已拒绝",
          childClass: "!h-[40px] !w-full",
          style: {
            background: "#c7c7c7",
          },
        },
      ].filter((e) => e.display);
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px]"
          style={{
            boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);",
            borderTop: "1px solid #f3f3f3",
          }}
        >
          <ButtonGroupView data={buttons} />
        </div>
      );
    };
    // const memberList = ref(memberList.value);
    const oneKey = () => {
      let checkIdList = memberList.value.filter((e: any) => e.isCheck);
      let checkIds = checkIdList.map((e: any) => e.userId).join(",");
      console.log("checkIds", checkIds);
      if (!checkIds) {
        showFailToast("请选择要分配的小户");
        return;
      }
      accept(detail.value.id, "1", checkIds);
      popup.value = false;
    };
    const renderCheckPop = () => {
      return (
        <Popup v-model:show={popup.value} round position="bottom">
          <PopTitle title="选择小户" />
          <PopCheck data={memberList.value} />
          <div
            class="h-[64px] w-full flex items-center justify-center px-[14px] box-border"
            style={{ boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.16)" }}
          >
            <ButtonView class="!h-[40px]" block onClick={() => oneKey()}>
              一键分配
            </ButtonView>
          </div>
        </Popup>
      );
    };
    return () => {
      return (
        <PageTitle title="任务详情" childClass="!p-[0px]">
          <CardView radius={0}>
            <IconText
              url={icon}
              text={detail.value.title}
              iconSize={20}
              class={["mt-[10px] mx-12"]}
              childClass={"!text-[#333] !text-[20px]"}
            />
            <Text class={["mx-12 mt-10"]}>{detail.value.createDate}</Text>
            <Text class={["mx-12 mt-10"]}>{detail.value.content}</Text>
          </CardView>
          {isDh() &&
            detail.value.richHelpGuaranteedSupplyTaskPartakes &&
            detail.value.richHelpGuaranteedSupplyTaskPartakes.length > 0 &&
            render1()}
          {render2()}
          {/* {detail.value.partakeFlag && render2()} */}
          {isDh() && renderCheckPop()}
        </PageTitle>
      );
    };
  },
});
